<template>
  <div class="screenmapdBox">
    <div class="fullTitle">
      <img src="@/assets/images/full_titleimg0.png" alt="" /><span
        >智能充电系统</span
      ><img src="@/assets/images/full_titleimg.png" alt="" />
    </div>
    <!-- <button class="goStatistics" ng-click="goStatistics()">退出全屏</button> -->
    <div id="screenmap"></div>
    <div class="areaSelect"></div>
    <div class="dashboard-address-container">
      <HycAddressCascader show-label v-model="area" :level="1" />
    </div>
  </div>
</template>
<script>
import { loadMap } from '@/utils/map-loader'
import HycAddressCascader from '@/components/hycAddressCascader'
import mapSettings from '@/config/mapSettings'
// import _ from 'lodash'
import getRoundOverlay from '@/utils/BigMapOverlay'
import _, { isString } from 'lodash'

function areaStationData() {
  return new Promise((res) => {
    res({
      code: 1,
      list: [
        { stationNum: 1, plugNum: 6 },
        { province: '浙江省', stationNum: 699, plugNum: 9059 },
        { province: '贵州省', stationNum: 170, plugNum: 2458 },
        { province: '山东省', stationNum: 150, plugNum: 6033 },
        { province: '河北省', stationNum: 299, plugNum: 5218 },
        { province: '四川省', stationNum: 227, plugNum: 4862 },
      ],
      stationDataList: [],
    })
  })
}

export default {
  name: 'screamMap',
  components: { HycAddressCascader },
  watch: {
    area(val) {
      let lastArea = ''
      let lastString = ''
      if (isString(val.district)) {
        lastString = 'district'
      } else if (isString(val.city)) {
        lastString = 'city'
      } else if (isString(val.province)) {
        lastString = 'province'
      }

      lastArea = val[lastString].split(',')[1] || ''

      if (lastArea !== '') {
        if (val.city) {
          this.map.centerAndZoom(lastArea, 11)
        } else if (lastArea === '台湾省') {
          if (lastArea === '台湾省') {
            let myGeo = new window.BMap.Geocoder()
            myGeo.getPoint(
              lastArea,
              (point) => {
                if (point) {
                  this.map.panTo(point, {
                    noAnimation: true,
                  })

                  this.map.setZoom(9)
                }
              },
              lastArea
            )
          }
          this.map.centerAndZoom(lastArea, 9)
        }
      }
      // if (isString(val.label)) {
      //   let lastArea = val.label.split(',').pop()
      //   if (val.city) {
      //     this.map.centerAndZoom(lastArea, 11)
      //   } else if (val.province) {
      //     if (lastArea === '台湾省') {
      //       let myGeo = new window.BMap.Geocoder()
      //       myGeo.getPoint(
      //         lastArea,
      //         (point) => {
      //           if (point) {
      //             this.map.panTo(point, {
      //               noAnimation: true,
      //             })

      //             this.map.setZoom(9)
      //           }
      //         },
      //         lastArea
      //       )
      //     }
      //     this.map.centerAndZoom(lastArea, 9)
      //   }
      // }
    },
  },
  data() {
    return {
      map: null,
      mapCenter: '',
      isMove: false,
      area: '',
    }
  },
  mounted() {},
  methods: {
    registMapEvents() {},
    initiMap() {
      loadMap.then(() => {
        let mapOptions = {
          minZoom: 6,
          maxZoom: 13,
          enableMapClick: false,
        }

        this.map = new window.BMap.map('screenmap', mapOptions)
        this.map.setMapStyle({
          styleJson: mapSettings,
        })

        this.map.enableScrollWheelZoom()
        this.map.disableDoubleClickZoom()
        this.mapCenter = '全国'
        this.map.centerAndZoom('中国')
      })
    },
    getStationData() {
      if (!this.map) return

      this.map.clearOverlays()
      let mapArea = this.map.getBounds()
      let params = {
        zoom: this.getZoomLevel(),
        sLng: mapArea.Ne,
        mLng: mapArea.Je,
        sLat: mapArea.Zd,
        mLat: mapArea.Xd,
      }

      areaStationData(params).then((res) => {
        this.removeNull(res.list, params.zoom)
        this.stationDataList = res.list
        this.buildOverLays(params.zoom)
      })
    },
    buildOverLays(zoom) {
      if (!this.map) return

      let RoundOverlay = getRoundOverlay()
      this.stationDataList.forEach((item) => {
        let myGeo = new window.BMap.Geocoder()
        if (zoom == 'province') {
          myGeo.getPoint(item.province, (point) => {
            if (point) {
              let mySquare = new RoundOverlay(point, item.province, item)
              this.map.addOverlay(mySquare)
            }
          })
        } else if (zoom == 'city') {
          myGeo.getPoint(item.province + item.city, (point) => {
            if (point) {
              let mySquare = new RoundOverlay(point, item.city, item)
              this.map.addOverlay(mySquare)
            }
          })
        } else if (zoom == 'district') {
          myGeo.getPoint(item.province + item.city + item.district, (point) => {
            if (point) {
              let mySquare = new RoundOverlay(point, item.city, item)
              this.map.addOverlay(mySquare)
            }
          })
        }
      })
    },
    eventRegist() {
      if (!this.map) return
      this.map.onload = () => {
        this.isMove = false
      }

      this.map.ondragend = () => {
        this.isMove = false
        this.getStationData()
      }

      this.map.onzoomend = () => {
        this.getStationData()
      }

      this.map.onmoveend = () => {
        if (this.isMove) {
          this.isMove = false
          this.getStationData()
        }
      }
    },
    getZoomLevel() {
      let zoom
      if (!this.map) return
      let zoomNum = this.map.getZoom()
      if (zoomNum <= 6) {
        zoom = 'province'
      } else if (zoomNum <= 9) {
        zoom = 'city'
      } else if (zoomNum > 9) {
        zoom = 'district'
      }

      return zoom
    },
    removeNull(list, zoom) {
      _.remove(list, (item) => {
        if (zoom === 'province') {
          return item.province == null
        } else if (zoom === 'city') {
          return item.city == null
        } else if (zoom === 'district') {
          return item.district === null
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.screenmapdBox {
  width: 100%;
  height: 100%;
  position: relative;
  p {
    margin: 0;
  }
}

.screenmapdBox .fullTitle {
  color: #4c7be1;
  font-size: 20px;
  padding: 6px 20px;
  box-sizing: border-box;
  z-index: 22;
  background: url('../../assets/images/full_title.png') no-repeat;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  background-size: 100% 100%;
  img:nth-child(1) {
    margin-right: 20px;
  }
  span:nth-child(2) {
    display: inline-block;
    margin-right: 20px;
  }
}

.screenmapdBox .goStatistics {
  position: absolute;
  top: 90px;
  right: 20px;
  z-index: 1000;
  width: 100px;
  font-size: 14px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
  outline: none;
  border: none;
  background-color: rgba(50, 68, 163, 0.9);
}

.screenmapdBox .areaSelect {
  position: absolute;
  top: 90px;
  left: 20px;
  z-index: 1000;
}

#screenmap {
  width: 100%;
  min-height: 100%;
  .circleOverlay {
    position: absolute;
    width: 90px;
    height: 90px;
    padding: 2px;
    border-radius: 50%;
    background-color: rgba(50, 68, 163, 0.9);
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-clip: padding-box;
    border: 8px solid rgba(50, 68, 163, 0.36);
    .circleOverlayTop {
      margin-top: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .circleOverlaySel {
    background-color: rgba(108, 157, 75, 1) !important;
    border: 8px solid rgba(140, 202, 98, 0.5) !important;
  }
}

.echartsBarbox {
  width: 300px;
  height: 260px;
  background: url(../../assets/images/full_Popup.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2222;
  position: absolute;
  .full_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 10px;
    z-index: 99999;
  }
  #echartsBar {
    position: absolute;
    top: 0;
  }
}

.boxSat {
  width: 100%;
  height: 100%;
  min-width: 1920px;
  min-height: 1080px;
  background: url('../../assets/images/full-back.png') no-repeat;
  background-size: 100% 100%;
}

.dashboard-address-container {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 10px;
  z-index: 999;
  background: #fff;
}
</style>
